<template>
  <div>
    <h1>Buttons（按钮）</h1>
    <p>
      v-btn （按钮）组件采Material
      Design设计主题风格，并增加众多的配置选项替换了标准的 html 按钮。
      任何颜色助手类都可以用来改变背景或文字颜色。 Try out an interactive
      screencast on how Vuetify buttons work.
    </p>
    <br />
    <h2>属性</h2>

    <br />
    <h3>block</h3>
    <p>block buttons extend the full available width.</p>
    <v-btn block> Block Button </v-btn>

    <br />
    <h3>depressed</h3>
    <p>
      depressed buttons still maintain their background color, but have no box
      shadow.
    </p>
    <v-row align="center" justify="space-around">
      <v-btn depressed> Normal </v-btn>
      <v-btn depressed color="primary"> Primary </v-btn>
      <v-btn depressed color="error"> Error </v-btn>
      <v-btn depressed disabled> Disabled </v-btn>
    </v-row>

    <br />
    <h3>fab (floating-action-button)</h3>
    <p>浮动按钮是圆形的，通常包含一个图标。</p>
    <div class="text-center">
      <v-btn class="mx-2" fab dark small color="primary">
        <v-icon dark> mdi-minus </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark small color="pink">
        <v-icon dark> mdi-heart </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark color="indigo">
        <v-icon dark> mdi-plus </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark color="teal">
        <v-icon dark> mdi-format-list-bulleted-square </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark large color="cyan">
        <v-icon dark> mdi-pencil </v-icon>
      </v-btn>

      <v-btn class="mx-2" fab dark large color="purple">
        <v-icon dark> mdi-android </v-icon>
      </v-btn>
    </div>

    <br />
    <h3>icon</h3>
    <p>
      Icons can be used for the primary content of a button. This property makes
      the button rounded and applies the text prop styles.
    </p>
    <v-card flat>
      <v-card-text>
        <v-container fluid class="pa-0">
          <v-row>
            <v-col cols="12">
              <p>Normal</p>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon color="pink">
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon color="indigo">
                <v-icon>mdi-star</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon color="green">
                <v-icon>mdi-cached</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon color="deep-orange">
                <v-icon>mdi-thumb-up</v-icon>
              </v-btn>
            </v-col>
          </v-row>

          <v-row class="mt-12">
            <v-col cols="12">
              <p>Disabled</p>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon disabled>
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon disabled>
                <v-icon>mdi-star</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon disabled>
                <v-icon>mdi-cached</v-icon>
              </v-btn>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn icon disabled>
                <v-icon>mdi-thumb-up</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
    </v-card>

    <br />
    <h3>loading</h3>
    <p>
      使用加载中（Loading）属性，你可以通知用户（当前页面）正在处理（某些操作）。
      （实现加载效果的）默认方式是使用v-progress-circular组件，当然它也是可以被我们自定义的。
    </p>
    <div class="text-center">
      <v-btn
        class="ma-2"
        :loading="loading"
        :disabled="loading"
        color="secondary"
        @click="loader = 'loading'"
      >
        Accept Terms
      </v-btn>

      <v-btn
        :loading="loading3"
        :disabled="loading3"
        color="blue-grey"
        class="ma-2 white--text"
        @click="loader = 'loading3'"
      >
        Upload
        <v-icon right dark> mdi-cloud-upload </v-icon>
      </v-btn>

      <v-btn
        class="ma-2"
        :loading="loading2"
        :disabled="loading2"
        color="success"
        @click="loader = 'loading2'"
      >
        Custom Loader
        <template v-slot:loader>
          <span>Loading...</span>
        </template>
      </v-btn>

      <v-btn
        class="ma-2"
        :loading="loading4"
        :disabled="loading4"
        color="info"
        @click="loader = 'loading4'"
      >
        Icon Loader
        <template v-slot:loader>
          <span class="custom-loader">
            <v-icon light>mdi-cached</v-icon>
          </span>
        </template>
      </v-btn>

      <v-btn
        :loading="loading5"
        :disabled="loading5"
        color="blue-grey"
        class="ma-2 white--text"
        fab
        @click="loader = 'loading5'"
      >
        <v-icon dark> mdi-cloud-upload </v-icon>
      </v-btn>
    </div>

    <br />
    <h3>outlined ( 轮廓 )</h3>
    <p>
      outlined buttons inherit their borders from the current color applied.
    </p>
    <div class="text-center">
      <v-btn class="ma-2" outlined color="indigo"> Outlined Button </v-btn>
      <v-btn class="ma-2" outlined fab color="teal">
        <v-icon>mdi-format-list-bulleted-square</v-icon>
      </v-btn>
      <v-btn class="ma-2" outlined large fab color="indigo">
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
    </div>

    <br />
    <h3>plain</h3>
    <p>
      plain buttons have a lower baseline opacity that reacts to hover and
      focus.
    </p>
    <div class="text-center">
      <v-sheet
        class="px-7 pt-7 pb-4 mx-auto text-center d-inline-block"
        color="blue-grey darken-3"
        dark
      >
        <div class="grey--text text--lighten-1 text-body-2 mb-4">
          Are you sure you want to delete this album?
        </div>

        <v-btn :disabled="plainloading" class="ma-1" color="grey" plain>
          Cancel
        </v-btn>

        <v-btn
          :loading="plainloading"
          class="ma-1"
          color="error"
          plain
          @click="remove"
        >
          Delete
        </v-btn>
      </v-sheet>
    </div>

    <br />
    <h3>rounded（圆角）</h3>
    <p>
      rounded buttons behave the same as regular buttons but have rounded edges.
    </p>
    <div class="text-center">
      <v-btn rounded color="primary" dark> Rounded Button </v-btn>
    </div>

    <br />
    <h3>Sizing</h3>
    <p>
      Buttons can be given different sizing options to fit a multitude of
      scenarios.
    </p>
    <v-container fluid class="pa-0">
      <v-row align="center">
        <v-col cols="12" sm="6">
          <div class="text-center">
            <div class="my-2">
              <v-btn x-small color="secondary" dark> Extra small Button </v-btn>
            </div>
            <div class="my-2">
              <v-btn small color="primary" dark> Small Button </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="warning" dark> Normal Button </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="error" dark large> Large Button </v-btn>
            </div>
            <div class="my-2">
              <v-btn x-large color="success" dark> Extra large Button </v-btn>
            </div>
          </div>
        </v-col>
        <v-col cols="12" sm="6">
          <div class="text-center">
            <div class="my-2">
              <v-btn color="secondary" fab x-small dark>
                <v-icon>mdi-television</v-icon>
              </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="primary" fab small dark>
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="warning" fab dark>
                <v-icon>mdi-account-circle</v-icon>
              </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="error" fab large dark>
                <v-icon>mdi-alarm</v-icon>
              </v-btn>
            </div>
            <div class="my-2">
              <v-btn color="success" fab x-large dark>
                <v-icon>mdi-domain</v-icon>
              </v-btn>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-container>

    <br />
    <h3>text</h3>
    <p>
      Text buttons have no box shadow and no background. Only on hover is the
      container for the button shown. When used with the color prop, the
      supplied color is applied to the button text instead of the background.
    </p>
    <v-row align="center" justify="space-around">
      <v-btn text> Normal </v-btn>
      <v-btn text color="primary"> Primary </v-btn>
      <v-btn text color="error"> Error </v-btn>
      <v-btn text disabled> Disabled </v-btn>
    </v-row>

    <br />
    <h3>tile</h3>
    <p>
      tile buttons behave the same as regular buttons but have no border radius.
    </p>
    <v-row align="center" justify="space-around">
      <v-btn tile color="success">
        <v-icon left> mdi-pencil </v-icon>
        Edit
      </v-btn>
    </v-row>

    <br />
    <h3>raised</h3>
    <p>
      raised buttons have a box shadow that increases when clicked. This is the
      default style.点击时有升高z轴特效
    </p>
    <v-row align="center" justify="space-around">
      <v-btn>Normal</v-btn>
      <v-btn color="primary"> Primary </v-btn>
      <v-btn color="error"> Error </v-btn>
      <v-btn disabled> Disabled </v-btn>
    </v-row>

    <br />
    <hr />
    <br />
    <h1>Buttons: Floating Action Button (按钮: 浮动动作按钮)</h1>
    <p>
      v-btn 组件可以用作浮动动作按钮。 这提供了一个具有主要行为点的应用程序。
      结合 v-speed-dial 组件, 您可以创建一组可供用户使用的功能。
    </p>

    <br />
    <h3>显示时的动画</h3>
    <p>
      当第一次显示时，浮动动作按钮应该在屏幕上显示动画。 这里我们使用v-show和
      v-fab-transition 。 您也可以使用由Vuetify或自己提供的自定义过度。
    </p>

    <v-container fluid>
      <v-row>
        <v-col cols="12" sm="12" md="6" offset-md="3">
          <v-card>
            <v-toolbar extended>
              <v-app-bar-nav-icon></v-app-bar-nav-icon>
              <template v-slot:extension>
                <v-fab-transition>
                  <v-btn
                    v-show="!hidden"
                    color="pink"
                    fab
                    dark
                    small
                    absolute
                    bottom
                    left
                  >
                    <v-icon>mdi-plus</v-icon>
                  </v-btn>
                </v-fab-transition>
              </template>
            </v-toolbar>
            <v-card-text
              style="height: 300px"
              class="grey lighten-5 text-center"
            >
              <v-btn color="primary" @click="hidden = !hidden">
                {{ hidden ? "Show" : "Hide" }}
              </v-btn>
            </v-card-text>
            <v-card-text style="height: 100px; position: relative">
              <v-fab-transition>
                <v-btn
                  v-show="!hidden"
                  color="pink"
                  dark
                  absolute
                  top
                  right
                  fab
                >
                  <v-icon>mdi-plus</v-icon>
                </v-btn>
              </v-fab-transition>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>

    <br />
    <h3>屏幕切换</h3>
    <p>
      当更改按钮的默认操作时，建议您显示一个过度来表示更改。 我们通过将key prop
      绑定到一段数据上，该数据可以正确地向Vue 过度系统发出操作变化的信号。
      虽然您可以为此使用自定义转换，但请确保将mode prop 设置为out-in。
    </p>
    <v-card id="lateral">
      <v-toolbar dark tabs flat color="indigo">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Page title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
        <template v-slot:extension>
          <v-tabs v-model="tabs" align-with-title>
            <v-tab href="#one"> Item One </v-tab>
            <v-tab href="#two"> Item Two </v-tab>
            <v-tab href="#three"> Item Three </v-tab>
            <v-tabs-slider color="pink"></v-tabs-slider>
          </v-tabs>
        </template>
      </v-toolbar>
      <v-card-text>
        <v-tabs-items v-model="tabs">
          <v-tab-item
            v-for="content in ['one', 'two', 'three']"
            :key="content"
            :value="content"
          >
            <v-card height="200px" flat> </v-card>
          </v-tab-item>
        </v-tabs-items>
      </v-card-text>
      <v-fab-transition>
        <v-btn
          :key="activeFab.icon"
          :color="activeFab.color"
          fab
          large
          dark
          bottom
          left
          class="v-btn--example"
        >
          <v-icon>{{ activeFab.icon }}</v-icon>
        </v-btn>
      </v-fab-transition>
    </v-card>

    <br />
    <h3>小型按钮</h3>
    <p>为了达到更好的视觉效果，我们可以使用小型按钮以适配列表的头像。</p>
    <v-row>
      <v-col cols="12" sm="6" offset-sm="3">
        <v-card>
          <v-toolbar color="light-blue" light extended>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title class="white--text"> My files </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>
            <v-btn icon>
              <v-icon>mdi-view-module</v-icon>
            </v-btn>
            <template v-slot:extension>
              <v-btn
                fab
                color="cyan accent-2"
                bottom
                left
                absolute
                @click="dialog = !dialog"
              >
                <v-icon>mdi-plus</v-icon>
              </v-btn>
            </template>
          </v-toolbar>
          <v-list two-line subheader>
            <v-subheader inset> Folders </v-subheader>

            <v-list-item v-for="item in items" :key="item.title" link>
              <v-list-item-avatar>
                <v-icon :class="[item.iconClass]">
                  {{ item.icon }}
                </v-icon>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>

                <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-action>
                <v-btn icon>
                  <v-icon color="grey lighten-1"> mdi-information </v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>

            <v-divider inset></v-divider>

            <v-subheader inset> Files </v-subheader>

            <v-list-item v-for="item in items2" :key="item.title" link>
              <v-list-item-avatar>
                <v-icon :class="[item.iconClass]">
                  {{ item.icon }}
                </v-icon>
              </v-list-item-avatar>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>

                <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-action>
                <v-btn icon ripple>
                  <v-icon color="grey lighten-1"> mdi-information </v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list>

          <v-dialog v-model="dialog" max-width="500px">
            <v-card>
              <v-card-text>
                <v-text-field label="File name"></v-text-field>

                <small class="grey--text">* This doesn't actually save.</small>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>

                <v-btn text color="primary" @click="dialog = false">
                  Submit
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-card>
      </v-col>
    </v-row>

    <br />
    <h3>快速拨号</h3>
    <p>
      The speed-dial component has a very robust api for customizing your FAB
      experience exactly how you want.
    </p>
    <v-card id="create">
      <v-container fluid>
        <v-row class="child-flex">
          <v-col cols="12" sm="6" md="4">
            <v-subheader>Options</v-subheader>
            <v-checkbox
              v-model="hover"
              label="Open on hover"
              hide-details
            ></v-checkbox>
          </v-col>
          <v-col cols="12" sm="6" md="4">
            <v-subheader>FAB location</v-subheader>
            <v-checkbox v-model="top" label="Top" hide-details></v-checkbox>
            <v-checkbox v-model="right" label="Right" hide-details></v-checkbox>
            <v-checkbox
              v-model="bottom"
              label="Bottom"
              hide-details
            ></v-checkbox>
            <v-checkbox v-model="left" label="Left" hide-details></v-checkbox>
          </v-col>
          <v-col cols="12" sm="6" md="4">
            <v-subheader>Speed dial direction</v-subheader>
            <v-radio-group v-model="direction" hide-details>
              <v-radio value="top" label="Top"></v-radio>
              <v-radio value="right" label="Right"></v-radio>
              <v-radio value="bottom" label="Bottom"></v-radio>
              <v-radio value="left" label="Left"></v-radio>
            </v-radio-group>
          </v-col>
          <v-col cols="12" sm="6" md="4">
            <v-subheader>Transition</v-subheader>
            <v-radio-group v-model="transition" hide-details>
              <v-radio value="slide-y-transition" label="Slide y"></v-radio>
              <v-radio
                value="slide-y-reverse-transition"
                label="Slide y reverse"
              ></v-radio>
              <v-radio value="slide-x-transition" label="Slide x"></v-radio>
              <v-radio
                value="slide-x-reverse-transition"
                label="Slide x reverse"
              ></v-radio>
              <v-radio value="scale-transition" label="Scale"></v-radio>
            </v-radio-group>
          </v-col>
        </v-row>
      </v-container>
      <v-speed-dial
        v-model="fab1"
        :top="top"
        :bottom="bottom"
        :right="right"
        :left="left"
        :direction="direction"
        :open-on-hover="hover"
        :transition="transition"
      >
        <template v-slot:activator>
          <v-btn v-model="fab" color="blue darken-2" dark fab>
            <v-icon v-if="fab"> mdi-close </v-icon>
            <v-icon v-else> mdi-account-circle </v-icon>
          </v-btn>
        </template>
        <v-btn fab dark small color="green">
          <v-icon>mdi-pencil</v-icon>
        </v-btn>
        <v-btn fab dark small color="indigo">
          <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn fab dark small color="red">
          <v-icon>mdi-delete</v-icon>
        </v-btn>
      </v-speed-dial>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loader: null,
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      plainloading: false,
      hidden: false,
      fab: false,
      hidden1: false,
      tabs: null,
      dialog: false,
      items: [
        {
          icon: "mdi-folder",
          iconClass: "grey lighten-1 white--text",
          title: "Photos",
          subtitle: "Jan 9, 2014",
        },
        {
          icon: "mdi-folder",
          iconClass: "grey lighten-1 white--text",
          title: "Recipes",
          subtitle: "Jan 17, 2014",
        },
        {
          icon: "mdi-folder",
          iconClass: "grey lighten-1 white--text",
          title: "Work",
          subtitle: "Jan 28, 2014",
        },
      ],
      items2: [
        {
          icon: "mdi-clipboard-text",
          iconClass: "blue white--text",
          title: "Vacation itinerary",
          subtitle: "Jan 20, 2014",
        },
        {
          icon: "mdi-gesture-tap-button",
          iconClass: "amber white--text",
          title: "Kitchen remodel",
          subtitle: "Jan 10, 2014",
        },
      ],
      direction: "top",
      fab1: false,
      fling: false,
      hover: false,
      tabs1: null,
      top: false,
      right: true,
      bottom: true,
      left: false,
      transition: "slide-y-reverse-transition",
    };
  },
  methods: {
    async remove() {
      this.plainloading = true;

      await new Promise((resolve) => setTimeout(resolve, 3000));

      this.plainloading = false;
    },
  },
  computed: {
    activeFab() {
      switch (this.tabs) {
        case "one":
          return { color: "success", icon: "mdi-share-variant" };
        case "two":
          return { color: "red", icon: "mdi-pencil" };
        case "three":
          return { color: "green", icon: "mdi-chevron-up" };
        default:
          return {};
      }
    },
  },
  watch: {
    loader() {
      const l = this.loader;
      this[l] = !this[l];

      setTimeout(() => (this[l] = false), 3000);

      this.loader = null;
    },
    top(val) {
      this.bottom = !val;
    },
    right(val) {
      this.left = !val;
    },
    bottom(val) {
      this.top = !val;
    },
    left(val) {
      this.right = !val;
    },
  },
};
</script>

<style>
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
}
@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>